/*
 * 检测项关联产品标签的管理页面视图
 * @Author: zfx
 * @Date: 2018-07-26 13:40:07
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-test-product-label-views {
        padding: 20px;
        .ivu-tabs {
            min-height: 600px;
        }
    }

</style>

<template>

	<div class="v-admin-test-product-label-views">

		<Tabs type="card">

			<TabPane
				:label="$t('common.check')"
				name="查看">

				<!-- 检测项关联产品标签列表 -->
				<product-label-index
					ref="check"
					:loading="table_loading"
					:skin-detection="skin_detection"
					:product-tags="product_tags"
					:product-detail="productTag_detail"
					@show="productTagDetail"/>

			</TabPane>

		</Tabs>

		<Modal
			v-model="show_modal"
			:title="$t('test_product_label.product_label_info')"
			class-name="vertical-middle-modal"
			@on-cancel="closeModal">

			<!-- 联产品标签编辑组件 -->
			<product-label-edit
				ref="edit"
				:product-tags="product_tags"
				:product-tag-detail="productTag_detail"
				:show-modal="show_modal"
				@update="postData"/>

			<div slot="footer"/>

		</Modal>

	</div>

</template>

<script>

import API_LIST from 'src/API_LIST';
import { mapMutations } from 'vuex';
import productLabelIndex from './index';
import productLabelEdit from './edit';

export default {

	name: 'TestProductLabelViews',

	components: {
		productLabelIndex,
		productLabelEdit,
	},
	data() {
		return {
			skin_detection: [], // 肤质检测项目信息

			product_tags: [], // 产品标签

			productTag_detail: {}, // 选中标签详情

			table_loading: false, // 表格更新时的loading

			show_modal: false, // 弹窗显示
		};
	},
	mounted() {
		this.fetchRequestData();
	},
	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
		 * 关闭模态框
		 * @return {undefined}
		 */
		closeModal() {
			this.productTag_detail = {};
		},

		/**
         * 查看产品标签列表详情
         * @param  {string} detail {产品标签详情对象}
         * @return {undefined}
         */
		productTagDetail(detail) {
			this.productTag_detail = detail;

			this.show_modal = true;
		},

		/**
         * 更新产品标签肤质检测项目
		 * @param {Number} id {产品标签ID}
		 * @param {Object} param {更新参数}
         * @return {undefined}
         */
		postData(id, param) {
			this.showSpin(this.$t('common.please_wait'));
			this.$http.post(`${API_LIST.ADMIN_SKIN_TEST}/${id}`, param)

				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.update_success'));
					this.show_modal = false;

					this.fetchSkinTest();
				})
				.catch((err) => {
					this.$Message.error(err.message);
				})
				.then(this.closeSpin);
		},

		/**
         * 获取肤质检测项目信息
         * @return {undefined}
         */
		fetchSkinTest() {
			this.showSpin(this.$t('common.please_wait'));
			this.table_loading = true;

			return this.$http.get(`${API_LIST.ADMIN_SKIN_TEST}`)
				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.skin_detection = data.skin_detection_items;

					return data.skin_detection_items;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => { this.table_loading = false; });
		},

		/**
         * 获取产品标签信息
         * @return {undefined}
         */
		fetchProductTag() {
			if (Array.isArray(this.product_tags) && this.product_tags.length > 0) {
				return Promise.resolve(this.product_tags);
			}
			return this.$http.get(`${API_LIST.ADMIN_PRODUCT_LABEL}`)
				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.product_tags = data.product_tags;

					return data.product_tags;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},

		/**
		 *  用Promise请求数据
		 * @param {undefined}
		 */
		fetchRequestData() {
			Promise.all([this.fetchProductTag(), this.fetchSkinTest()]);
		},

	},
};
</script>
